<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Card</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <h4>1. Basic Card</h4>
  <ion-card>
    <ion-card-content>
      This is a basic card content.
    </ion-card-content>
  </ion-card>

  <br>

  <h4>2. Card Headers</h4>
  <ion-card>
    <ion-card-header>
      Header
    </ion-card-header>
    <ion-card-content>
      This is the card content.
    </ion-card-content>
  </ion-card>

  <br>

  <h4>3. Lists In Cards</h4>
  <ion-card>
    <ion-card-header>Explore Nearby</ion-card-header>
    <ion-list>
      <button ion-item><ion-icon name="cart" item-left></ion-icon>Shopping</button>
      <button ion-item><ion-icon name="medical" item-left></ion-icon>Hospital</button>
      <button ion-item><ion-icon name="cafe" item-left></ion-icon>Cafe</button>
      <button ion-item><ion-icon name="paw" item-left></ion-icon>Dog Park</button>
      <button ion-item><ion-icon name="beer" item-left></ion-icon>Pub</button>
      <button ion-item><ion-icon name="planet" item-left></ion-icon>Space</button>
    </ion-list>
  </ion-card>

  <br>

  <h4>4. Images in Cards</h4>
  <ion-card>
    <img src="assets/image/nin-live.png"/>
    <ion-card-content>
      <ion-card-title>
        Nine Inch Nails Live
        </ion-card-title>
      <p>
        The most popular industrial group ever, and largely
        responsible for bringing the music to a mass audience.
      </p>
    </ion-card-content>
  </ion-card>

  <br>

  <div class="card-background-page">
    <h4>5. Background Images</h4>
    <ion-card>
      <img src="assets/image/card-saopaolo.png"/>
      <div class="card-title">São Paulo</div>
      <div class="card-subtitle">41 Listings</div>
    </ion-card>

    <ion-card>
      <img src="assets/image/card-amsterdam.png"/>
      <div class="card-title">Amsterdam</div>
      <div class="card-subtitle">64 Listings</div>
    </ion-card>

    <ion-card>
      <img src="assets/image/card-sf.png"/>
      <div class="card-title">San Francisco</div>
      <div class="card-subtitle">72 Listings</div>
    </ion-card>

    <ion-card>
      <img src="assets/image/card-madison.png"/>
      <div class="card-title">Madison</div>
      <div class="card-subtitle">28 Listings</div>
    </ion-card>

  </div>

  <br>

  <h4>6. Social Card</h4>
  <ion-card>
    <ion-item>
      <ion-avatar item-left>
        <img src="assets/image/marty-avatar.png">
      </ion-avatar>
      <h2>Marty McFly</h2>
      <p>November 5, 1955</p>
    </ion-item>

    <img src="assets/image/advance-card-bttf.png">

    <ion-card-content>
      <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button ion-button clear small>
          <ion-icon name="thumbs-up"></ion-icon>
          <div>12 Likes</div>
        </button>
      </ion-col>
      <ion-col>
        <button ion-button clear small>
          <ion-icon name="text"></ion-icon>
          <div>4 Comments</div>
        </button>
      </ion-col>
      <ion-col center text-center>
        <ion-note>
          11h ago
        </ion-note>
      </ion-col>
    </ion-row>
  </ion-card>

  <br>

  <h4>7. Map Card</h4>
  <ion-card class="card-map">
    <img src="assets/image/advance-card-map-madison.png">
    <ion-fab right top>
      <button ion-fab>
        <ion-icon name="pin"></ion-icon>
      </button>
    </ion-fab>

    <ion-item>
      <ion-icon name="football" item-left large></ion-icon>
      <h2>Museum of Football</h2>
      <p>11 N. Way St, Madison, WI 53703</p>
    </ion-item>

    <ion-item>
      <ion-icon name="wine" item-left large ></ion-icon>
      <h2>Institute of Fine Cocktails</h2>
      <p>14 S. Hop Avenue, Madison, WI 53703</p>
    </ion-item>

    <ion-item>
      <span item-left>18 min</span>
      <span item-left>(2.6 mi)</span>
      <button ion-button clear item-right>
        <ion-icon name="navigate" item-left></ion-icon>
        Start
      </button>
    </ion-item>

  </ion-card>

</ion-content>
